<template>
  <div>
    <div class="form-box">
      <div class="form-header">基本信息</div>
      <div class="form-body">
        <el-form :model="model" :rules="rules" ref="model" label-width="100px" class="demo-ruleForm">
          <el-form-item label="课程名称：" prop="courseName">
            <el-input v-model="model.courseName"></el-input>
          </el-form-item>
          <el-form-item label="课程摘要：" prop="summary">
            <el-input type="textarea" v-model="model.summary"></el-input>
          </el-form-item>
          <el-form-item label="课程封面：" prop="face">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img v-if="model.face" :src="model.face" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="课程介绍：" prop="summary">
            <editor
              api-key="no-api-key"
              :init="{
               height: 500,
               menubar: false,
               plugins: [
                 'advlist autolink lists link image charmap print preview anchor',
                 'searchreplace visualblocks code fullscreen',
                 'insertdatetime media table paste code help wordcount'
               ],
               toolbar:
                 'undo redo | formatselect | bold italic backcolor | \
                 alignleft aligncenter alignright alignjustify | \
                 bullist numlist outdent indent | removeformat | help'
             }"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="form-box">
      <div class="form-header">课程信息</div>
      <div class="form-body">
        <el-form :model="model" :rules="rules" ref="model" label-width="100px" class="demo-ruleForm">
          <el-form-item label="课程分类：" prop="courseCateName">
            <div data-v-4916d16c="" class="el-input">
<!--              <el-input v-model="model.courseCateName" :focus="isShowChooseCourseCate = true"></el-input>-->
              <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" v-model="model.courseCateName" @click="isShowChooseCourseCate = true">
            </div>
          </el-form-item>
          <el-form-item label="课程标签：" prop="courseLabel">
            <el-input v-model="model.courseLabel"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="form-box">
      <div class="form-header">课程附件</div>
      <div class="form-body">
        <el-table
          :data="attachmentList"
          border
          style="width: 100%">
          <el-table-column
            prop="fileName"
            label="PPT">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('action.see')}}</el-button>
              <el-button type="text" size="small">{{$t('action.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-row>
      <el-button @click="close(false)">{{$t('action.cancel')}}</el-button>
      <el-button type="primary" @click="save()">{{$t('action.comfirmAndNextStep')}}</el-button>
    </el-row>
    <ChooseCourseCate v-if="isShowChooseCourseCate" @closePop="chooseCourseCate"></ChooseCourseCate>
  </div>
</template>

<script>
  import Editor from '@tinymce/tinymce-vue'
  import ChooseCourseCate from "@/views/common/ChooseCourseCate";

  export default {
    name: "CourseBaseInfo",
    props: ["save", "close"],
    components: {
      ChooseCourseCate,
      'editor': Editor
    },
    data() {
      return {
        model: {
          courseName: '',
          summary: '',
          courseCateId: null,
          courseCateName: '',
          courseLabel: '',
          face: "http://mego-haina.oss-cn-hangzhou.aliyuncs.com/upload/default/201112001228948.jpg",
        },
        attachmentList:[],
        rules: {
          courseName: [
            {required: true, message: '请输入课程名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          summary: [
            {required: true, message: '请填写课程摘要', trigger: 'blur'}
          ],
          face: [
            {required: true, message: '请选择课程封面', trigger: 'blur'}
          ],
          courseCateName: [
            {required: true, message: '请选择课程分类', trigger: 'blur'}
          ],
          courseLabel: [
            {required: true, message: '请填写课程标签', trigger: 'blur'}
          ]
        },
        isShowChooseCourseCate: false,
      };
    },
    mounted() {
      this.getCourse();
      this.getCourseAttachment();
      console.log(this.model)
    },
    methods: {
      getCourse(){
        this.$api.course.getCourse().then(
          res => {
            this.model = res.data;
          }
        )
      },
      getCourseAttachment(){
        this.$api.course.getAttachment().then(
          res => {
            this.attachmentList = res.data;
          }
        )
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      chooseCourseCate(data){
        this.isShowChooseCourseCate = false
        if(data){
          this.model.courseCateName = data.name;
          this.model.courseCateId = data.id;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .form-box {
    margin: 10px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

    .form-header {
      height: 42px;
      line-height: 42px;
      padding: 0 15px;
      border-bottom: 1px solid #f6f6f6;
      color: #333;
      border-radius: 2px 2px 0 0;
      font-size: 14px;
      text-align: left;
      font-weight: bolder;
    }

    .form-body {
      position: relative;
      padding: 10px 15px;
      line-height: 24px;

      .avatar {
        width: 200px;
      }
    }
  }
  .el-form {
    width: 60%;
    margin: 0 auto
  }
</style>
